<template>
  <div class="personal-container" ref="List">
    <!-- 用户信息 -->
    <el-row :gutter="16">
      <el-col :span="8">
        <div class="info-box">
          <p>{{integral}}</p>
          <span>我的{{typeName}}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-box">
          <p>{{surplusCount}}</p>
          <span>今日剩余下载</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-box">
          <p>{{dwnCount}}</p>
          <span>已下载文章</span>
        </div>
      </el-col>
    </el-row>

    <!-- 历史记录 title -->
    <div class="history">
      <span></span>
      <p>历史记录</p>
    </div>

    <!-- 历史记录展示 -->
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-immediate-check="true"
      infinite-scroll-distance="20"
      class="history-info"
      v-for="item in dataList"
      :key="item.id"
    >
      <div class="history-box">
        <div class="left">
          <div class="left-p">
            <p>{{item.dwnTicket}}#</p>
          </div>
          <span>下载券</span>
        </div>
        <div class="right">
          <p>{{item.title}}</p>
          <span>{{item.createDate}}</span>
          <a :href="item.originalUrl" target="_Blank" class="skip el-icon-arrow-right"></a>
        </div>
      </div>
    </div>
    <div class="loading-box" v-if="loading">
      <mt-spinner type="fading-circle" class="loading-more" color="white"></mt-spinner>
    </div>
    <p v-if="loadingDom" class="loading">这已经是我的底线啦~</p>
  </div>
</template>
<script>
// import pageination from 'vue_pageination' // 分页

export default {
  data() {
    return {
      dataList: [],
      pageIndex: 1, //当前页
      pageSize: 10, // 每页显示条数
      totalPage: 0, // 总页数
      integral: 0, //  财富值
      surplusCount: 0, //  剩余下载
      dwnCount: 0, //  已下载
      loading: false, //为true时不会触发加载更多，false可以触发
      loadingDom: false,
      typeName: "财富值"
    };
  },
  mounted() {
    this.$nextTick(() => {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      this.$refs.List.style.height = h + "px";
    });
    this.getData();
    this.getDataList();
  },
  components: {
    // pageination
  },
  methods: {
    // 展示数据
    getData() {
      this.$http({
        url: this.$http.adornUrl(`/app/cardInfo`),
        method: "post",
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.integral = data.integral;
          this.surplusCount = data.surplusCount;
          this.dwnCount = data.dwnCount;
          if (data.type == 1) {
            this.typeName = "财富值";
          } else if (data.type == 2) {
            this.typeName = "下载次数";
          } else {
            this.typeName = "下载券";
          }
        } else {
          Toast(data.msg);
        }
      });
    },
    getDataList(type) {
      // this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl("/app/dwnDistoryList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize
        })
      })
        .then(({ data }) => {
          console.log(data);
          this.loading = false;
          // 设置分页
          this.totalPage = data.page.totalPage; //总页数
          if (this.pageIndex == 1) {
            this.dataList = data.page.list;
          } else {
            this.dataList = this.dataList.concat(data.page.list);
          }

          if (this.pageIndex >= this.totalPage) {
            this.loading = false;
            this.loadingDom = true;
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    // 上滑加载更多页
    loadMore() {
      // console.log('滚动')
      this.pageIndex++;

      if (this.pageIndex <= this.totalPage) {
        this.loading = true;
        this.getDataList("loadMore");
      } else {
        this.loadingDom = true;
        return false;
      }
    }
  }
};
</script>
<style lang="less">
.personal-container {
  // 用户信息
  .info-box {
    width: 110px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    padding-top: 18px;
    box-sizing: border-box;
    font-family: "DIN";

    p {
      font-size: 24px;
      color: #16c79d;
      text-align: center;
    }

    span {
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
    }
  }

  // 历史记录title
  .history {
    text-align: left;
    margin: 10px 0;
    line-height: 22px;
    height: 22;
    box-sizing: border-box;

    span {
      border-left: 5px solid white;

      &::after {
        content: "";
        display: inline-block;
        height: 12px;
        border-left: 4px solid white;
        margin-left: 5px;
      }
    }

    p {
      color: white;
      font-size: 14px;
      color: #ffffff;
      display: inline-block;
      margin-left: 6px;
    }
  }

  // 历史记录展示
  .history-box {
    width: 100%;
    height: 80px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin-top: 4px;

    .left {
      width: 23%;
      height: 100%;
      border-right: 1px dashed #16c79d;
      text-align: center;
      padding-top: 16px;
      box-sizing: border-box;
      position: relative;
      background-color: #ffffff;
      float: left;

      &::before,
      &::after {
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 6px;
        background: #16c79d;
        position: absolute;
        right: -6px;
        opacity: 0.9;
      }

      &::before {
        top: -6px;
        box-shadow: 0 -2px 1px #16c79d inset;
      }

      &::after {
        bottom: -6px;
        box-shadow: 0 2px 1px #16c79d inset;
      }

      .left-p {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background: #16c79d;
        border-radius: 12px;
        margin: 0 auto;

        p {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
        }
      }

      span {
        font-size: 14px;
        color: #222222;
        letter-spacing: 0;
        text-align: center;
      }
    }

    .right {
      width: 77%;
      background-color: #ffffff;
      height: 80px;
      float: left;
      box-sizing: border-box;
      text-align: left;
      padding: 20px 50px 20px 15px;

      p {
        font-size: 14px;
        color: #222222;
        overflow: hidden;
        /*自动隐藏文字*/
        text-overflow: ellipsis;
        /*文字隐藏后添加省略号*/
        white-space: nowrap;
        /*强制不换行*/
      }

      span {
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        text-align: center;
        margin-top: 4px;
        display: block;
        text-align: left;
      }

      .skip {
        font-size: 20px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }
  .loading-box {
    margin-left: 50%;
    transform: translate(-10%, 0);
  }

  .loading {
    margin: 5px;
    color: white;
  }
}
</style>
